<template>
  <div class="homemenu">
    <div class="headermenu">
      <a-page-header
        :style="{
          background: 'var(--color-bule-4)',
          width: '100%',
          position: 'relative',
        }"
        title="医疗服务系统"
        subtitle="医疗服务系统 2.0"
        :show-back="false"
      >
        <template #extra>
          <div :style="{ margin: '0 10px', fontWeight: 'bold' }">
            {{ role() }}
          </div>
          <a-button type="text" status="danger" @click="onQuit">退出</a-button>
        </template>
      </a-page-header>
    </div>
    <div class="menu">
      <MenuMoudle class="menu-demo"></MenuMoudle>
      <div class="main">
        <router-view />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import MenuMoudle from "@/components/MenuMoudle.vue";
import { useRoute, useRouter, RouteRecordRaw } from "vue-router";
import { emitter } from "@/untils/route-listener";

const role = () => {
  const user = localStorage.getItem("userRole");
  switch (user) {
    case "admin":
      return "管理员";

    case "doctor":
      return "医生";
    case "nurse":
      return "护士";
  }
};

const router = useRouter();
// console.log(getRoutes);
const onQuit = () => {
  localStorage.clear();
  router.push({ name: "Login" });
  emitter.emit("boolean", false);
};
</script>
<style scoped lang="less">
.homemenu {
  width: 100%;
  height: 100%;
}
.headermenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  border-bottom: 1px solid var(--color-neutral-3);
  background-color: #7BC0FC;
  display: flex;
  //   justify-content: center;
  align-items: center;
  z-index: 999;
}
.menu {
  margin-top: 100px;
  border-top: 1px solid var(--color-neutral-3);
  box-sizing: border-box;
  max-height: calc(100vh - 100px);
  max-width: 100vw;
  display: flex;
  .menu-demo {
    // box-sizing: border-box;
    position: fixed;
    top: 101px;
    left: 0;
    width: 200px;
    border-right: 1px solid var(--color-neutral-3);
    height: calc(100vh - 100px);
    z-index: 999;
    // padding: 40px;
    background-color: #7BC0FC;
  }
  .main {
    box-sizing: border-box;
    width: 100%;
    margin-left: 200px;
  }
}
/deep/ .arco-page-header-content {
  padding: 0;
  border: 0;
}
/deep/ .arco-page-header-extra {
  position: absolute;
  right: 20px;
  display: flex;
  align-items: center;
  font-size: 18px;
}
</style>
